<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.min.css">
  <link rel="stylesheet" href="animate.min.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="swiper.animate1.0.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    html{
      font-size: 100px;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;s
    }
    .swiper-container {
      width:6.4rem;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-wrapper img{
        width:100%;
        height: 100%;
    }
    .swiper-pagination-bullet{
      width:10px;
      height:80px;
      border-radius: 0;
      cursor: pointer;
      background:#000;
      opacity: 0.1;
      border:0;
    }
    .swiper-pagination-bullet-active{
      background: #fff;
      opacity: 1;
    }
    .swiper-wrapper>div{
      position: relative;
    }
    .swiper-wrapper img{
      position: absolute;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <!-- 第一页 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="image/ren1.png" alt="">
          <img src="image/wen5.png" alt="" class="wen1 wen">
          <img src="image/wen6.png" alt="" class="wen2 wen">
          <img src="image/wen5.png" alt="" class="wen3 wen">
          <img src="image/wen5.png" alt="" class="wen4 wen">
          <img src="image/wen6.png" alt="" class="wen5 wen">
          <img src="image/wen5.png" alt="" class="wen6 wenw">
          <img src="image/wen6.png" alt="" class="wen7 wenw">
          <img src="image/wen3.png" alt="" class="remi">
          <img src="image/wen10.png" alt="" class="meigeren ani" swiper-animate-effect="bounceInUp" swiper-animate-delay="0.3s">
          <img src="image/wen11.png" alt="" class="chongjing ani" swiper-animate-effect="flash" swiper-animate-delay="0.6s">
          <img src="image/tip_black.png" alt="" class="jiantou">
        </div>
        <!-- 第二页 -->
        <div class="swiper-slide">
          <img src="image/ye1.jpg" alt="">
          <img src="image/tip_black.png" alt="" class="jiantou">
          <img src="image/ren21.png" alt="" class="ren ani" swiper-animate-effect="fadeIn">
          <img src="image/wen24.png" alt="" class="cong ani" swiper-animate-effect="bounceInLeft" swiper-animate-delay="0.3s">
          <img src="image/xian21.png" alt="" class="xian ani" swiper-animate-effect="bounceInLeft" swiper-animate-delay="0.6s">
          <img src="image/wen25.png" alt="" class="wushiyi ani" swiper-animate-effect="bounceInDown" swiper-animate-delay="0.9s">
          <img src="image/xian22.png" alt="" class="xian1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-delay="1.2s">
          <img src="image/wen26.png" alt="" class="dao ani" swiper-animate-effect="bounceInLeft" swiper-animate-delay="1.5s">
          <img src="image/wen27.png" alt="" class="wugeyi ani" swiper-animate-effect="bounceInDown" swiper-animate-delay="1.7s">
          <img src="image/wen21.png" alt="" class="jinpai ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2.0s">
          <img src="image/wen22.png" alt="" class="duanlian ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2.3s">
          <img src="image/wen23.png" alt="" class="tiyu ani" swiper-animate-effect="fadeIn" swiper-animate-delay="2.6s">
        </div>
        <!-- 第三页 -->
        <div class="swiper-slide stop-swiping" id="stop">
          <img src="image/xingkong1.jpg" alt="">
          <!-- 第一部分 -->
          <div class="pic">
            <img src="image/tip_black.png" alt="" class="jiantou" id="shang">
            <img src="image/wen31.png" alt="" class="weilai ani" swiper-animate-effect="fadeIn">
            <img src="image/wen32.png" alt="" class="xian2 ani" swiper-animate-effect="fadeIn" swiper-animate-delay=".3s">
            <img src="image/wen33.png" alt="" class="weida ani" swiper-animate-effect="fadeIn" swiper-animate-delay=".6s">
            <img src="image/wen34.png" alt="" class="fabuhui ani" swiper-animate-effect="fadeIn" swiper-animate-delay=".9s">
          </div>
          <!-- 第二部分 -->
          <div class="pic2">
            <img src="image/wen43.png" alt="" class="jiazhi ani" swiper-animate-effect="flipInY" swiper-animate-delay=".1s" style="display:none;">
            <img src="image/wen41.png" alt="" class="dongyu ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".1s" style="display:none;">
            <div id="blue" style="display:none;"></div>
            <div id="red" style="display:none;"></div>
            <div id="orange" style="display:none;"></div>
            <div id="green" style="display:none;"></div>
            <div id="purple" style="display:none;"></div>
          </div>
          <!-- 第三部分 -->
          <div class="pic3">
            <img src="image/qiu41.png" alt="" class="qiu1 qiu" style="display:none;">
            <img src="image/qiu42.png" alt="" class="qiu2 qiu" style="display:none;">
            <img src="image/qiu43.png" alt="" class="qiu3 qiu" style="display:none;">
            <img src="image/qiu44.png" alt="" class="qiu4 qiu" style="display:none;">
            <img src="image/wen53.png" alt="" class="chixu ani" swiper-animate-effect="bounce" style="display:none;">
            <img src="image/wen54.png" alt="" class="shoupi ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".6s" style="display:none;">
            <img src="image/wen41.png" alt="" class="dongyu ani" swiper-animate-effect="hinge" swiper-animate-delay=".3s" style="display:none;">
          </div>
        </div>
        <!-- 第四页 -->
        <div class="swiper-slide">
          <img src="image/xingkong2.jpg" alt="">
          <img src="image/tip_black.png" alt="" class="jiantou">
          <img src="image/box4_logo1.png" alt="" class="kuwan ani" swiper-animate-effect="bounceIn">
          <img src="image/box4_logo2.png" alt="" class="zepp ani" swiper-animate-effect="bounceIn" swiper-animate-delay="0.4s">
          <img src="image/box4_logo3.png" alt="" class="chulian ani" swiper-animate-effect="bounceIn" swiper-animate-delay="0.8s">
          <img src="image/box4_logo4.png" alt="" class="erji ani" swiper-animate-effect="bounceIn" swiper-animate-delay="1.2s">
          <img src="image/box4_logo5.png" alt="" class="huola ani" swiper-animate-effect="bounceIn" swiper-animate-delay="1.6s">
          <img src="image/box4_logo6.png" alt="" class="quyundong ani" swiper-animate-effect="bounceIn" swiper-animate-delay="2s">
          <img src="image/box4_logo7.png" alt="" class="hupu ani" swiper-animate-effect="bounceIn" swiper-animate-delay="2.2s">
          <img src="image/box4_logo8.png" alt="" class="info ani" swiper-animate-effect="bounceIn" swiper-animate-delay="1.8s">
          <img src="image/box4_logo9.png" alt="" class="xinghe ani" swiper-animate-effect="bounceIn" swiper-animate-delay="1.4s">
          <img src="image/box4_logo10.png" alt="" class="zhihui ani" swiper-animate-effect="bounceIn" swiper-animate-delay="1s">
          <img src="image/box4_logo11.png" alt="" class="xianyu ani" swiper-animate-effect="bounceIn" swiper-animate-delay="0.6s">
          <img src="image/box4_logo12.png" alt="" class="coch ani" swiper-animate-effect="bounceIn" swiper-animate-delay="0.2s">
        </div>
        <!-- 第五页 -->
        <div class="swiper-slide">
          <img src="image/box5_bg.png" alt="">
          <img src="image/tip_black.png" alt="" class="jiantou">
          <img src="image/box5_text.png" alt="" class="liucheng ani" swiper-animate-effect="bounceIn">
        </div>
        <!-- 第六页 -->
        <div class="swiper-slide">
          <img src="image/box6_bg1.png" alt="" class="zuoshang">
          <img src="image/box6_bg2.png" alt="" class="youshang">
          <img src="image/box6_bg3.png" alt="" class="zuozhong">
          <img src="image/box6_bg4.png" alt="" class="youzhong">
          <img src="image/qiu41.png" alt="" class="qiu5 qiu">
          <img src="image/qiu42.png" alt="" class="qiu6 qiu">
          <img src="image/qiu43.png" alt="" class="qiu7 qiu">
          <img src="image/qiu44.png" alt="" class="qiu8 qiu">
          <div class="yiqilai"><h4>未来,<br>一起来</h4><p>RUTURE TOGETHER 2015</p></div>
          <div id="login">
            <img src="image/box6_text.png" alt="" class="ruchang">
            <div class="text">
                <input type="text">
                <input type="text">
                <input type="submit" id="sub">
            </div>
          </div>
          <img src="image/tip_black.png" alt="" class="jiantou">
        </div>
        <!-- 第七页 -->
        <div class="swiper-slide">
          <img src="image/box5_bg.png" alt="" class="beijingtu ani" swiper-animate-effect="fadeIn" swiper-animate-delay="1s">
          <img src="image/ma1.png" alt="" class="erweima ani" swiper-animate-effect=" flip">
          <img src="image/t8_1.png" alt="" class="mihan ani" swiper-animate-effect="bounceInLeft">
          <img src="image/t8_2.png" alt="" class="wukesong ani" swiper-animate-effect="fadeIn" swiper-animate-delay="0.4s">
          <img src="image/t_3.png" alt="" class="lianxi ani" swiper-animate-effect="bounceInRight">
          <img src="image/t_xian.png" alt="" class="xiant ani" swiper-animate-effect="fadeIn" swiper-animate-delay="0.8s">
          <img src="image/tip_black.png" alt="" class="jiantou">
        </div>
        <!-- 第八页 -->
        <div class="swiper-slide">
          <img src="image/tip_black.png" alt="" class="jiantou">
          <img src="image/box5_bg.png" alt="" swiper-animate-delay=".9s">
          <img src="image/logo.png" alt="" class="logo ani" swiper-animate-effect="flip">
          <img src="image/sm.png" alt="" class="qiandao ani" swiper-animate-effect="bounceIn" swiper-animate-delay=".3s">
          <div class="bottom">
            <img src="image/smm.png" alt="" class="qingshuru ani" swiper-animate-effect="fadeIn" swiper-animate-delay=".6s">
            <input type="text" class="txt ani" swiper-animate-effect="fadeIn" swiper-animate-delay=".6s">
            <input type="submit" class="subb ani" swiper-animate-effect="fadeIn" swiper-animate-delay=".6s">
          </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
          clickable : true,
        },
        direction : 'vertical',
        paginationClickable: true,
        noSwiping : true,
        noSwipingClass : 'stop-swiping',
        on:{
          init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次，去除ani类名
            if(swiper.activeIndex == 2){
                  var num=0;
                  $("#stop").click(function(){
                      if(num==0){
                          $("#blue").css({'display':'block','webkitAnimation':'move5 5s linear infinite'});
                          $("#red").css({'display':'block','webkitAnimation':'move1 5s linear infinite'});
                          $("#orange").css({'display':'block','webkitAnimation':'move2 5s linear infinite'});
                          $("#green").css({'display':'block','webkitAnimation':'move3 5s linear infinite'});
                          $("#purple").css({'display':'block','webkitAnimation':'move4 5s linear infinite'});
                          $(".weida").css({'display':'none','webkitAnimation':'out 0.7s linear forwards'});
                          $(".jiazhi").css({'display':'block','webkitAnimation':'in 0.7s linear forwards'});
                          $(".fabuhui").css({'display':'none','webkitAnimation':'out1 0.7s linear forwards'});
                          $(".dongyu").css({'display':'block','webkitAnimation':'in1 0.7s linear forwards'});
                      }else if(num==1){
                          $("#blue").css({'display':'none','webkitAnimation':'z1 0.5s linear forwards'});
                          $("#red").css({'display':'none','webkitAnimation':'z2 0.5s linear forwards'});
                          $("#orange").css({'display':'none','webkitAnimation':'z3 0.5s linear forwards'});
                          $("#green").css({'display':'none','webkitAnimation':'z4 0.5s linear forwards'});
                          $("#purple").css({'display':'none','webkitAnimation':'z5 0.5s linear forwards'});
                          $(".qiu1").css({'display':'block'});
                          $(".qiu2").css({'display':'block'});
                          $(".qiu3").css({'display':'block'});
                          $(".qiu4").css({'display':'block'});
                          $(".jiazhi").css({'display':'none','webkitAnimation':'out 0.7s linear forwards'});
                          $(".dongyu").css({'display':'none','webkitAnimation':'out2 1.5s linear forwards'});
                          $(".chixu").css({'display':'block','webkitAnimation':'bou 1s linear forwards'});
                          $(".shoupi").css({'display':'block','webkitAnimation':'bou1 0.5s linear 1s forwards'});
                          $("#stop").removeClass('stop-swiping');
                          $('#shang').css('display','block');
                      }
                       num++;
                  })
              }else{
                $("#blue").css({'display':'none','webkitAnimation':''});
                $("#red").css({'display':'none','webkitAnimation':''});
                $("#orange").css({'display':'none','webkitAnimation':''});
                $("#green").css({'display':'none','webkitAnimation':''});
                $("#purple").css({'display':'none','webkitAnimation':''});
                $(".weida").css({'webkitAnimation':''});
                $(".jiazhi").css({'webkitAnimation':''});
                $(".fabuhui").css({'webkitAnimation':''});
                $(".dongyu").css({'webkitAnimation':''});
                $(".qiu1").css('display','none');
                $(".qiu2").css('display','none');
                $(".qiu3").css('display','none');
                $(".qiu4").css('display','none');
                $(".chixu").css('webkitAnimation','');
                $(".shoupi").css('webkitAnimation','');
                $("#stop").addClass('swiper-slide stop-swiping');
                $('#shang').css('display','none');
            }
          },
        },
      });
      (function (doc,win){
        resetPage = function () {
            var deviceWidth = doc.documentElement.clientWidth;
            var scale = deviceWidth / 640;
            if (deviceWidth >= 640) {
                doc.documentElement.style.fontSize = '100px';
            } else {
                doc.documentElement.style.fontSize = scale * 100 + 'px';
            }
        }
        if (!doc.addEventListener) {
            return;
        }
        doc.addEventListener('DOMContentLoaded', resetPage, false);
        win.addEventListener('resize', resetPage, false);
    })(document,window)
  </script>
</body>
</html>
